﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>来回拖动文本</title>
    <style>
        .droptarget {
            float: left;
            width: 100px;
            height: 35px;
            margin: 15px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
</head>
<body>
    <p>在两个矩形框中来回拖动文本:</p>
    <div class="droptarget">
        <p draggable="true" id="dragtarget">拖动我!</p>
    </div>
    <div class="droptarget"></div>
    <p style="clear:both;">
    <p id="demo"></p>

    <script>
        /* 拖动时触发*/
        document.addEventListener("dragstart", function (event) {
            //dataTransfer.setData()方法设置数据类型和拖动的数据
            event.dataTransfer.setData("Text", event.target.id);
            // 拖动 p 元素时输出一些文本
            document.getElementById("demo").innerHTML = "开始拖动文本.";
            //修改拖动元素的透明度
            event.target.style.opacity = "0.4";
        });
        //在拖动p元素的同时,改变输出文本的颜色
        document.addEventListener("drag", function (event) {
            document.getElementById("demo").style.color = "red";
        });
        // 当拖完p元素输出一些文本元素和重置透明度
        document.addEventListener("dragend", function (event) {
            document.getElementById("demo").innerHTML = "完成文本的拖动";
            event.target.style.opacity = "1";
        });
        /* 拖动完成后触发 */
        // 当p元素完成拖动进入droptarget,改变div的边框样式
        document.addEventListener("dragenter", function (event) {
            if (event.target.className == "droptarget") {
                event.target.style.border = "3px dotted red";
            }
        });
        // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
        document.addEventListener("dragover", function (event) {
            event.preventDefault();
        });
        // 当可拖放的p元素离开droptarget，重置div的边框样式
        document.addEventListener("dragleave", function (event) {
            if (event.target.className == "droptarget") {
                event.target.style.border = "";
            }
        });
        /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
        复位输出文本的颜色和DIV的边框颜色
        利用dataTransfer.getData()方法获得拖放数据
        拖拖的数据元素id(“drag1”)
        拖拽元素附加到drop元素*/
        document.addEventListener("drop", function (event) {
            event.preventDefault();
            if (event.target.className == "droptarget") {
                document.getElementById("demo").style.color = "";
                event.target.style.border = "";
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        });
    </script>


</body>
</html>